<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>天截选课系统</title>
    <link href="assets/css/Icons.css" rel="stylesheet">
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='assets/css/Sans.css' rel='stylesheet' type='text/css' />
    <link rel="stylesheet" href="assets/js/Lightweight-Chart/cssCharts.css">
    <link rel="stylesheet" href="assets/plugins/element-ui/index.css" />
    <style>
        #page-wrapper{
            margin: 0;
            padding: 0;
            top:0;
            min-height: 100vh !important;
        }
        #context{
            width: 100%;
            text-align: center;
            margin-top: 50px;
        }
        #context form{
            margin-top: 20px;
            line-height: 30px;
        }
        #context .line{
            font-size: 20px;
            margin-bottom: 20px;
        }
        #context .line label{
            margin-right: 20px;
            width: 100px;
        }
        .input-message{
            border-radius: 10px;
            padding: 5px;
        }
        #context .line .input-message{
            margin-left: 20px;
            width: 300px;
            background: white;
            border: black 3px solid;
        }
        #context .line .input-message[readonly]{
            border: red 3px solid;
        }
        #context .line a{
            color: black;
            cursor: pointer;
            text-decoration: none;
        }
        #context .line a:hover{
            background: red;
            color: white;
        }
    </style>
</head>

<body>
<div id="wrapper">
    <div id="page-wrapper">
        <div class="header">
            <h1 class="page-header">
                <!--Dashboard-->
                <span v-if="user.role==1">
                    学生
                </span>
                <span v-else>
                    老师
                </span>
                个人信息
            </h1>
            <ol class="breadcrumb">
                <li><a href="#">Home</a></li>
                <li><a href="#">user-message</a></li>
            </ol>
        </div>
        <div id="context">
            <form v-if="user.role==1">
                <div class="line" v-if="type!=1">
                    <label>学号</label>
                    <input class="input-message" name="studentId" v-model="user.studentId" readonly>
                </div>

                <div class="line">
                    <label>姓名</label>
                    <input class="input-message" name="studentName" v-model="user.studentName">
                </div>

                <div class="line">
                    <label>手机号</label>
                    <input class="input-message" name="phone" v-model="user.phone">
                </div>

                <div class="line">
                    <label>身份证号</label>
                    <input class="input-message" name="idCard" v-model="user.idCard">
                </div>

                <div class="line">
                    <label>性别</label>
                    <span class="input-message"  style="display: inline-block;padding-right: 20px">
                        <input type="radio" name="sex" v-model="user.sex" value="1" style="margin-right: 5px;">男
                        <input type="radio" name="sex" v-model="user.sex" value="2" style="margin-left: 20px;margin-right: 5px">女
                    </span>
                </div>

                <div class="line">
                    <label>专业</label>
                    <select class="input-message" name="classId" v-model="user.classId">
                        <option v-for="(item,index) in specializedList" :value="item.classId">{{item.specialized}}</option>
                    </select>
                </div>

                <div class="line" v-if="type==1">
                    <a href="javascript:void(0)" @click="add()" style="display: inline-block;width: 420px" class="input-message">添加学生</a>
                </div>

                <div class="line" v-else>
                    <a href="javascript:void(0)" @click="update()" style="display: inline-block;" class="input-message">修改信息</a>
                    <a href="javascript:void(0)" style="display: inline-block;width: 100px;margin-left: 20px" class="input-message" @click="dialogFormVisible=true">修改密码</a>
                </div>

            </form>





            <form v-else>
                <div class="line" v-if="type!=3">
                    <label>工号</label>
                    <input class="input-message" name="teacherId" v-model="user.teacherId" readonly>
                </div>

                <div class="line">
                    <label>姓名</label>
                    <input class="input-message" name="teacherName" v-model="user.teacherName">
                </div>

                <div class="line">
                    <label>手机号</label>
                    <input class="input-message" name="phone" v-model="user.phone">
                </div>

                <div class="line">
                    <label>专业</label>
                    <select class="input-message" name="classId" v-model="user.classId">
                        <option v-for="(item,index) in specializedList" :value="item.classId">{{item.specialized}}</option>
                    </select>
                </div>

                <div class="line">
                    <label>工资</label>
                    <input v-if="type!=3" class="input-message" name="teacherId" v-model="user.salary" readonly>
                    <input v-else class="input-message" name="teacherId" v-model="user.salary">
                </div>

                <div class="line" v-if="type!=3">
                    <label>是否管理员</label>
                    <span style="display: inline-block" class="input-message" v-if="user.isAdmin==1" readonly>是</span>
                    <span style="display: inline-block" class="input-message" v-else>否</span>
                </div>

                <div class="line">
                    <label>性别</label>
                    <span class="input-message"  style="display: inline-block">
                        <input type="radio" name="sex" v-model="user.sex" value="1" style="margin-right: 5px;">
                        <span style="display: inline-block;margin-right: 20px">男</span>

                        <input type="radio" name="sex" v-model="user.sex" value="2" style="margin-left: 20px;margin-right: 5px">
                        <span style="display: inline-block;">女</span>
                    </span>
                </div>


                <div class="line" v-if="type==3">
                    <a href="javascript:void(0)" @click="add()" style="display: inline-block;width: 420px" class="input-message">添加老师</a>
                </div>

                <div class="line" v-else>
                    <a href="javascript:void(0)" @click="update()" style="display: inline-block;" class="input-message">修改信息</a>
                    <a href="javascript:void(0)" style="display: inline-block;width: 100px;margin-left: 20px" class="input-message" @click="dialogFormVisible=true">修改密码</a>
                </div>


            </form>

            <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
                <el-form>
                    <!--管理员修改时，不用旧密码-->
                    <el-form-item v-if="type!=2&&type!=4" label="旧密码" :label-width="formLabelWidth">
                        <el-input show-password v-model="form.oldPassword" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="新密码" :label-width="formLabelWidth">
                        <el-input show-password v-model="form.newPassword" autocomplete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="确认密码" :label-width="formLabelWidth">
                        <el-input show-password v-model="form.twoPassword" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updatePassword()">确 定</el-button>
                </div>
            </el-dialog>

        </div>
    </div>
    <!-- /. PAGE INNER  -->
</div>
<!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/vue.js"></script>
<script src="assets/plugins/element-ui/index.js"></script>
<script>
    var vm = new Vue({
        el:'#wrapper',
        data(){
            return {
                user:{
                    // createTime: "2022-09-07T10:07:35",
                    // createUser: "202200001",
                    // id: 2,
                    // password: "123456",
                    // phone: "16544875642",
                    // role: 1,
                    // sex: "2",
                    // classId: "2",
                    // studentId: 20195011,
                    // studentName: "张三",
                    // updateTime: "2022-09-07T10:07:53",
                    // updateUser: "202200001",
                    // userId: 20195011

                    // classId: 1,
                    // createTime: "2022-09-07T10:09:03",
                    // createUser: "13",
                    // id: 1,
                    // isAdmin: "1",
                    // password: "123456",
                    // posts: "主讲老师",
                    // role: 2,
                    // salary: 8000,
                    // sex: "1",
                    // teacherId: 202200001,
                    // teacherName: "张晓峰",
                    // updateTime: "2022-09-07T10:09:09",
                    // updateUser: "13",
                    // userId: 202200001
                },
                specializedList:[
                    {
                        classId:1,
                        specialized:"软件工程"
                    },
                    {
                        classId:2,
                        specialized:"金融学"
                    },
                ],
                type:"",
                dialogFormVisible: false,
                form: {
                    studentId:"",
                    teacherId:"",
                    oldPassword:"",
                    newPassword:"",
                    twoPassword:""
                },
                formLabelWidth: '120px'
            }
        },
        mounted(){
            this.getUser();
            this.getSpecializedList();
        },
        methods:{
            requestUser(url,id){
                //本人修改
                let $this = this;
                var idData = {};
                if(id){ //用id参数
                    idData={"id":id}
                }
                $.ajax({
                    url: url,
                    type: "GET",
                    data:idData,
                    async: false,
                    success: function (data) {
                        if(data.code=="200"){
                            $this.user = data.data.user
                            console.log(data.data.user)
                            if($this.user.role==1){ //当前这个是学生
                                $this.form.studentId = $this.user.studentId;
                            }else{
                                $this.form.teacherId = $this.user.teacherId;
                            }
                        }else{
                            $this.$message.error('获取数据失败')
                        }
                    },
                    error: function (data) {
                        console.log(data.message);
                    }
                })
            },
            getUser(){
                var url = location.search;
                if(url.indexOf("addStudent")!=-1){
                    //管理员来添加学生 1
                    this.type = 1;
                    this.user = {
                        phone: "",
                        sex: "",
                        role:"1",
                        classId: "",
                        studentName: "",
                    }
                }else if (url.indexOf("updateStudentId")!=-1){
                    //管理员来修改学生 2
                    this.type = 2;
                    var studentId = url.substring(url.indexOf("=")+1);
                    this.requestUser("/student/getStudent",studentId);
                }else if(url.indexOf("addTeacher")!=-1){
                    //管理员添加老师
                    this.type = 3;
                    this.user = {
                        classId: 0,
                        posts: "", //主讲老师
                        role: 2,
                        salary: "",
                        sex: "",
                        teacherName: "",
                    }
                }else if(url.indexOf("updateTeacherId")!=-1){
                    //管理员修改老师
                    this.type = 4;
                    var teacherId = url.substring(url.indexOf("=")+1);
                    this.requestUser("/teacher/getTeacher",teacherId);
                }else{
                    //本人修改(学生/老师)
                    this.requestUser("/user/info");
                    this.type=0;
                }
            },
            getSpecializedList(){
                let $this = this;
                $.ajax({
                    url: "/specialized/list",
                    type: "GET",
                    // contentType: "application/json",
                    // data: JSON.stringify(loginFrom),
                    // dataType: "json",
                    async: false,
                    success: function (data) {
                        if(data.code=="200"){
                            $this.specializedList = data.data.specializedList
                        }else{
                            alert("未登录");
                        }
                    },
                    error: function (data) {
                        console.log(data.message);
                    }
                })
            },
            update(){
                var url = "";
                if(this.user.role==1){
                    url = "/student/updateStudent";
                }else{
                    url = "/teacher/updateTeacher";
                }
                let $this = this;
                console.log(this.user)
                $.ajax({
                    url: url,
                    type: "PUT",
                    contentType: "application/json",
                    data: JSON.stringify($this.user),
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        if(data.code=="200"){
                            $this.$message.success("修改成功")
                            $this.user = undefined;
                            if($this.type==0){ //自己修改，跳转回首页
                                location.href="index.html"
                            }else if($this.type==1||$this.type==2){ //学生管理
                                location.href="tab-panel.html"
                            }else{
                                location.href="chart.html"
                            }
                            $this.getUser();

                        }else{
                            $this.$message.error("修改失败："+data.message)
                        }
                    },
                    error: function (data) {
                        console.log(data.message);
                    }
                })
            },
            logout(){
                $.ajax({
                    url: "/user/logout",
                    type: "GET",
                    // contentType: "application/json",
                    // data: JSON.stringify(loginFrom),
                    // dataType: "json",
                    async: false,
                    success: function (data) {
                        if (data.code == 200) {
                            location.replace("/dayday/login/index.html");
                        } else {
                            alert("出现错误！");
                        }
                    },
                    error: function (data) {
                        console.log(data.message);
                    }
                })
            },
            updatePassword() {
                let $this = this;
                var url = "";
                if (this.user.role == 1) {
                    url = "/student/updatePassword";
                } else if (this.user.role == 2) {
                    url = "/teacher/updatePassword";
                }
                $.ajax({
                    url: url,
                    type: "POST",
                    data: $this.form,
                    async: false,
                    success: function (data) {
                        if (data.code == 200) {
                            if($this.type==0){ //如果是自己来修改的密码，就回到登录页面
                                $this.$message.success(data.message + "，1秒后跳转到登录页面")
                                setTimeout($this.logout, 1500)
                            }else{
                                $this.$message.success(data.message)
                                $this.getUser();
                            }
                            $this.dialogFormVisible = false
                        } else {
                            $this.$message.error("修改失败：" + data.message)
                        }
                    },
                    error: function (data) {
                        $this.$message.error(data)
                    }
                })
            },
            add(){
                if(this.user.role==1){//学生
                    this.save("/student/addStudent");
                }else{
                    this.save("/teacher/addTeacher");
                }
            },
            save(url){
                let $this = this;
                $.ajax({
                    url: url,
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify($this.user),
                    dataType: "json",
                    async: false,
                    success: function (data) {
                        console.log(data)
                        if(data.code=="200"){
                            $this.$message.success("添加成功")
                            //返回上一页
                            history.back();
                            // window.history.back(-1);
                            // location.replace("/dayday/tab-panel.html");
                        }else{
                            $this.$message.error("添加失败："+data.message)
                        }
                    },
                    error: function (data) {
                        console.log(data.message);
                    }
                })
            }
        }
    })
</script>

</body>

</html>